<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析 - 宜居指数分析系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <link th:href="@{/css/custom.css}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-cloud-sun"></i> 宜居指数分析系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/search">
                            <i class="fas fa-search"></i> 重新查询
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/compare">
                            <i class="fas fa-chart-bar"></i> 区域对比
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        <div class="row">
            <div class="col-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">首页</a></li>
                        <li class="breadcrumb-item"><a href="/search">查询</a></li>
                        <li class="breadcrumb-item active" th:text="${province} + ' - ' + ${city} + ' - ' + ${district}"></li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card text-center shadow">
                    <div class="card-body">
                        <h5 class="card-title">宜居指数</h5>
                        <h2 class="display-4 fw-bold" th:text="${#numbers.formatDecimal(livableIndex, 1, 1)}"></h2>
                        <span class="badge" th:classappend="${livableIndex >= 80} ? 'bg-success' : (${livableIndex >= 60} ? 'bg-warning' : 'bg-danger')"
                              th:text="${livableIndex >= 80} ? '优秀' : (${livableIndex >= 60} ? '良好' : '一般')"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center shadow">
                    <div class="card-body">
                        <h5 class="card-title">平均AQI</h5>
                        <h2 class="display-4 fw-bold" th:text="${#numbers.formatDecimal(#aggregates.avg(weatherData.![aqi]), 1, 0)}"></h2>
                        <span class="badge" th:classappend="${#aggregates.avg(weatherData.![aqi]) <= 50} ? 'bg-success' : (${#aggregates.avg(weatherData.![aqi]) <= 100} ? 'bg-warning' : 'bg-danger')"
                              th:text="${#aggregates.avg(weatherData.![aqi]) <= 50} ? '优' : (${#aggregates.avg(weatherData.![aqi]) <= 100} ? '良' : '污染')"></span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center shadow">
                    <div class="card-body">
                        <h5 class="card-title">平均温度</h5>
                        <h2 class="display-4 fw-bold" th:text="${#numbers.formatDecimal(#aggregates.avg(weatherData.![temperature]), 1, 1)} + '°C'"></h2>
                        <span class="badge bg-info">适宜</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-line"></i> AQI趋势</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="aqiChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-thermometer-half"></i> 温度变化</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="temperatureChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-tint"></i> 湿度变化</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="humidityChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-smog"></i> PM2.5趋势</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="pm25Chart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-table"></i> 详细数据</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>温度(°C)</th>
                                        <th>湿度(%)</th>
                                        <th>AQI</th>
                                        <th>PM2.5</th>
                                        <th>天气状况</th>
                                        <th>宜居指数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="data : ${weatherData}">
                                        <td th:text="${#temporals.format(data.date, 'yyyy-MM-dd')}"></td>
                                        <td th:text="${#numbers.formatDecimal(data.temperature, 1, 1)}"></td>
                                        <td th:text="${#numbers.formatDecimal(data.humidity, 1, 1)}"></td>
                                        <td th:text="${data.aqi}"></td>
                                        <td th:text="${data.pm25}"></td>
                                        <td th:text="${data.weatherCondition}"></td>
                                        <td>
                                            <span class="badge" th:classappend="${data.livableIndex >= 80} ? 'bg-success' : (${data.livableIndex >= 60} ? 'bg-warning' : 'bg-danger')"
                                                  th:text="${#numbers.formatDecimal(data.livableIndex, 1, 1)}"></span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container text-center">
            <p>&copy; 2024 宜居指数分析系统</p>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        // 准备图表数据
        const weatherData = /*[[${weatherData}]]*/ [];
        
        // 提取数据
        const labels = weatherData.map(d => d.date);
        const aqiData = weatherData.map(d => d.aqi);
        const temperatureData = weatherData.map(d => d.temperature);
        const humidityData = weatherData.map(d => d.humidity);
        const pm25Data = weatherData.map(d => d.pm25);
        
        // AQI图表
        new Chart(document.getElementById('aqiChart'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'AQI',
                    data: aqiData,
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        
        // 温度图表
        new Chart(document.getElementById('temperatureChart'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: '温度 (°C)',
                    data: temperatureData,
                    borderColor: 'rgb(54, 162, 235)',
                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: false
                    }
                }
            }
        });
        
        // 湿度图表
        new Chart(document.getElementById('humidityChart'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: '湿度 (%)',
                    data: humidityData,
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100
                    }
                }
            }
        });
        
        // PM2.5图表
        new Chart(document.getElementById('pm25Chart'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'PM2.5',
                    data: pm25Data,
                    borderColor: 'rgb(255, 159, 64)',
                    backgroundColor: 'rgba(255, 159, 64, 0.1)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>
</html>
